<template>
	<div class="">
		<ul class="premise-list">
			<li class="premise-list-item"
					v-for="(row1, index) in selectedList"
					:key="index"
					>
				<p class="premise-name">{{row1.premisesName}}
					<i class="premise-info-icon" @click="deletePremise(row1)"></i>
				</p>
				<p class="premise-info-item item-bottom-border">
					<span style="width: 90px;display: inline-block;">最短报备时间：</span>
					<span class="special-time">提前{{row1.specialTime}}</span>
				</p>
				<div class="unified-template" >
					<div class="template-row-list  item-bottom-border">
						<label class="label-title">期望带看时间：</label>
						<div class="row-content">
							<input type="text"  placeholder="选择期望带看时间" readonly
										 class="routineTime"
										 v-model="row1.hopeVisitTime"
										 @click="openPicker(row1.premisesId)" >
						</div>
						<mt-datetime-picker
								:ref="'picker'+ row1.premisesId"
								:startDate="new Date()"
								type="datetime"
								v-model="row1.time"
								@confirm="confirmDatetime(row1.premisesId, index)">
						</mt-datetime-picker>
					</div>
				</div>
				<div class="unified-template  item-bottom-border">
					<div class="template-row-list" style="padding-top: 5px;padding-bottom: 5px;">
						<label class="label-title" style="padding-top: 4px;">报备推荐人：</label>
						<div class="row-content">
							<div class="routineInfo"
									 @click="toRecommendList(row1.premisesId, index)" >
								{{row1.userName ? row1.userName : '请选择报备推荐人'}}
							</div>
							<i class="fa fa-angle-right"></i>
						</div>
					</div>
				</div>
				<p class="premise-info-item"
					 v-if="row1.errorMsg"
					 style="padding-bottom: 0;margin-bottom: 0;padding-top: 9px;">
					<i class="premise-info-icon warning-icon"></i>
					<span class="error-text">{{row1.errorMsg}}</span>
				</p>
			</li>
		</ul>
		<div style="display: flex;width: 90%; margin: 0 auto;">
			<button class="btn-block add-premise"  @click="addPremises">添加楼盘</button>
			<button class="btn-block submit-form" @click="decisionPremises">提交报备</button>
		</div>
		<recommend-list
				class="recommend-modal" :class="{'recommend-modal-show': recommendVisible}"
				ref="recommendSelect"
				v-show="recommendVisible" :premises-id="currentPremiseId" @choose="chooseRecommend"/>
	</div>
</template>
<script>
	import moment from 'moment'
	import { Constant } from '../../../../js/base'
	import RecommendList from "../../RecommendList.vue";
	const { DATE_FORMAT } = Constant
	export default{
		components: {
			RecommendList
		},
		data(){
			return {
				selectedList: this.list,
				currentPremiseId: '',
				currentIndex: '',
				recommendVisible: false,
			}
		},
		props: {
			list: {
				type: Array,
				default: function () {
					return []
				}
			}
		},
		mounted() {
			this.init();
		},
		methods:{
			/**
			 *
			 */
			init () {
			},
			addPremises() {
				this.$emit('add-premise')
			},
			deletePremise (row) {
				this.$emit('delete-premise',row)
			},
			toRecommendList (premisesId, index) {
				const _this = this;
				this.setCurrentPremiseId(premisesId);
				this.currentIndex = index;
				_this.recommendVisible = true;
			},
			chooseRecommend (info = {}) {
				let index = this.currentIndex
				if(info.recommenderUuid  && (index || index === 0)) {
					this.selectedList[index].userName = info.userName
					this.selectedList[index].recommenderUuid = info.recommenderUuid
					this.selectedList[index].recommender = info.recommenderUuid
				}
				this.recommendVisible = false
			},

			openPicker(premisesId) {
				let pickerId = 'picker' + premisesId
				this.$refs[pickerId][0].open(); //
			},
			/**
			 *
			 * @param id
			 */
			setCurrentPremiseId (id) {
				this.currentPremiseId = id
			},
			confirmDatetime(id, index){
				let time = this.selectedList[index].time
				console.log(time)
				if(time) {
					time = moment(time).format(DATE_FORMAT);
					this.$set(this.selectedList[index], 'hopeVisitTime', time)
				}

			},
			decisionPremises () {
				this.$emit('submit', this.selectedList)
			},
		},
		watch: {
			list: {
				handler (val) {
					this.selectedList = val || []
				},
				deep: true,
				immediate: true,
			}
		}
	}
</script>
<style lang="less" scoped>
	@main-color: #ff7900;
	@error-color: #FB5D63;
	.container {
		.error-text {
			color: @error-color
		}
		.item-bottom-border {
			border-bottom: 1px solid #ccc;
		}
		.premise-list{
			margin: 0;
			height: 450px;
			overflow-y: scroll;
			.premise-list-item {
				padding: 10px 20px;
				margin: 12px 0;
				background-color: #fff;
				.premise-name {
					color: #333333;
					font-size: 14px;
					margin: 7px 0px;
					font-weight: 600;
				}
				.unified-template {
					padding: 0;
					.template-row-list {
						@left: 90px;
						padding-left: @left;
						.label-title{
							width: @left;
						}
						.routineTime {
							font-size: 12px;
							position: relative;
							top: -2px;
							padding-left: 0;
						}
						.row-content .fa-angle-right {
							top: -2px;
						}
					}
				}
			}
			.premise-info-icon {
				display: inline-block;
				float: right;
				width: 24px;
				height: 24px;
				background-repeat: no-repeat;
				background-image: url("../../../../assets/images/delete.png");
				&.warning-icon {
					float: left;
					background-image: url("../../../../assets/images/warning.png");
				}
			}
			.premise-info-item {
				padding: 6px 0;
				color: #333;
				font-size: 12px;
				margin-bottom: 5px;
				span.special-time {
					color: @main-color;
				}
			}
		}
		.btn-block {
			&.add-premise {
				flex: 1;
				background: transparent;
				border: 1px solid #ff7900;
				color: #ff7900;
				margin-right: 12px;
			}
			&.submit-form {
				flex: 2;
			}
		}
		.recommend-modal {
			top: 0;
			height: 100%;
			width: 100%;
			background-color: #fff;
		}
		.recommend-modal.recommend-modal-show {
			position: absolute;
			z-index: 1;
		}
	}

</style>
<style>.picker-items{width:100% !important}</style>
